<!-- 证书 -->
<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="false" title="我的证书" />
		<view class="body" style="background-color: white;padding: 0 15px;overflow-y: auto;padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);flex: 1;">
			<!-- cell -->
			<view class="" v-for="(item, index) in allSkills" :key="index">
				<view style="padding: 12px 15px;display: flex;">
					<view style="flex: 1;">
						<view style="font-size: 16px;font-weight: bold;">{{item.extendList}}</view>
						<view style="display: flex;align-items: center;margin-top: 10px;">
							<image src="/static/logo.png" style="width: 10px;height: 10px;" mode="aspectFit"></image>
							<view style="font-size: 10px;color: #999999;margin-left: 5px;">已上传</view>
						</view>
						<view style="font-size: 11px;color: #999999;margin-top: 17px;">可在接单大厅中接相关订单</view>
					</view>
					<!-- right -->
					<image v-if="i % 3 ==0" src="/static/nice_bg.png"
						style="width: 108px;height: 72px;border-radius: 12px;overflow: hidden;" mode="aspectFill">
					</image>
					<view v-else
						style="width: 108px;height: 72px;border: 1px solid #2456E0;border-radius: 12px;display: flex;justify-content: center;align-items: center;">
						<image src="/static/icon-add-img.png" style="width: 24px;height: 20px;" mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { skillOption, selectOption, updateUserInfor } from '../../api'
	export default {
		data() {
			return {
				allSkills: [],
				myskillType: [],
			}
		},
		mounted() {
			console.log('1111')
			this.getSkillOption()
		},
		methods: {
			chooseOption(name, indx) {
				this.$set(this.allSkills[indx], 'isSelect', !this.allSkills[indx].isSelect );
				console.log(name,indx,this.myskillType,this.allSkills)
			},
			getSkillOption() {
				skillOption().then(res => {
					console.log('技能页===', res)
					if(res.status == 200) {
						let allSkills = res.data.skillTypes
						let userId = uni.getStorageSync('userInfo').id
						
						selectOption(userId).then(res => {
							console.log('技能页===111', res)
							if(res.status == 200) {
								if(res.data.skillType){
									let myskillType = res.data.skillType
									let myskillArr = myskillType.split(',')
									allSkills.forEach((item,index)=>{
										for(let j = 0; j < myskillArr.length; j++) {
											if(myskillArr[j] == item.name) {
												item.isSelect = true
											}
										}
									})
									this.allSkills = allSkills
									console.log('this.allSkills', this.allSkills)
									this.myskillType = myskillArr
									console.log('this.myskillType', this.myskillType)
								}else{
									this.allSkills = allSkills
								}
							}
						})
					}
					
				})
			},
			submit() {
				let arrFilter = this.allSkills.filter(a=>{
					return a.isSelect
				})
				let skillType = []
				arrFilter.map((item,index)=>{
					skillType[index]=item.name
				})
				if (skillType.length==0) {
					uni.showToast({
						title: '请选择技能',
						icon: 'none',
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
					id: userInfo.id,
					skillType: skillType.join(),
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '修改成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
				
		}
	}
</script>

<style>

</style>
